<template>
	<u-navbar backIconColor="#fff" title="基地详情" title-color="#fff" :is-back="true" :background="{}" class="bg"
		:borderBottom="false"></u-navbar>
	<view style="position: relative; color: #fff">
		<swiper style="width: 100%; height: 808rpx">
			<swiper-item v-for="(item, index) in inits.info.h_image_arr" :key="index" style="width: 100%; height: 100%">
				<!-- poster封面 -->
				<video v-if="isVideoFile(item)" id="myVideo" :src="item" style="width: 100%; height: 100%"
					object-fit="cover" :muted="true" autoplay loop :show-fullscreen-btn="false"
					:enable-progress-gesture="false" />
				<image v-else style="width: 100%; height: 100%" :src="item"></image>
			</swiper-item>
		</swiper>
		<!-- <u-image v-if="inits.info.h_image_arr.length" :src="inits.info.h_image_arr[0]" height="808"
			mode="aspectFill"></u-image> -->
		<view class="flex flex-jc-sa flex-ai-c font-24 list" style="position: absolute; bottom: 0; width: 100%">
			<view class="u-text-center"
				@click="jump(`/pages/hotel/album?id=${inits.hotelId}&title=${inits.info.h_name}`)">
				<i-icon icon="icon-a-24gl-photoAlbum" size="36rpx" />
				<view class="mt-10">基地相册</view>
			</view>
			<view class="u-text-center" @click="jump(`/pages/hotel/details/introduce?id=${inits.hotelId}&type=0`)">
				<i-icon icon="icon-xiangqing-2" size="36rpx" />
				<view class="mt-10">基地详情</view>
			</view>
			<view style="position: relative">
				<button open-type="share" class="u-text-center"></button>
				<view class="u-text-center">
					<i-icon icon="icon-fenxiang" size="36rpx" />
					<view class="mt-10">分享</view>
				</view>
			</view>
		</view>
	</view>

	<view class="addr">
		<view class="pad-t-b-30 ml-20 font-bold font-32">
			{{ inits.info.h_name }}
		</view>
		<view class="flex flex-ai-c">
			<image src="/static/image/label.svg" style="padding: 0 40rpx 0 26rpx;width: 30rpx;height: 32rpx;;"></image>
			<!-- <i-icon color="#009943" icon="icon-youshiyufuwuicon-" type="m" style="padding: 0 40rpx 0 26rpx" /> -->
			<view style="width: 70%" class="font-24">{{ inits.info.h_characteristic }}</view>
		</view>
		<u-line margin="20rpx 0" />
		<view class="flex flex-ai-c flex-jc-sb" style="padding-bottom: 25rpx">
			<view class="flex f1">
				<i-icon color="#009943" icon="icon-dianhua" style="padding: 0 40rpx 0 26rpx" />
				<view class="font-24">{{ inits.info.address }}</view>
			</view>
			<view style="padding: 0 60rpx 0 195rpx" class="u-text-center map-bg" @click="chooseAddr(inits.info)">
				<u-icon name="map-fill" color="#000" size="26rpx" />
				<view class="font-20">位置</view>
			</view>
		</view>
	</view>

	<u-tabs-swiper name="name" active-color="#333333" inactive-color="#666666" activeColor="#333333" bar-width="100"
		:bar-style="{ background: '#009943' }" bg-color="none" ref="tabs1" :list="inits.tabs" :current="inits.current"
		@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>

	<!-- 列表 -->
	<swiper :current="inits.swiperCurrent" @transition="transition"
		style="margin: 0 30rpx; height: 90vh; padding-bottom: 20rpx" @animationfinish="animationfinish" class="swiper">
		<swiper-item class="swiper-item">
			<view class="font-24 flex flex-ai-c flex-jc-sa title" @click="jump(`/pages/common/calendarSelection?min=${minDay}`)">
				<view class="ml-20">
					<view>
						<text style="color: #999999">入住</text>
						{{ `${inits.calendarData.start.month}月${inits.calendarData.start.day}日` }}
					</view>
					<view>
						<text style="color: #999999">退房</text>
						{{ `${inits.calendarData.end.month}月${inits.calendarData.end.day}日` }}
					</view>
				</view>
				<view style="height: 69rpx">
					<u-line direction="col" color="#000" />
				</view>
				<view class="mr-20">
					<view @click.stop="inits.setRoom = true">{{selectValue.reserve_room_num}}间房</view>
					<!-- <view @click.stop="inits.setNum = true">{{selectValue.reserve_p_num}}位成人</view> -->
				</view>
			</view>
			<!-- tag -->
			<scroll-view scroll-x class="tag">
				<view class="flex">
					<view v-for="(item, i) in inits.tag" :key="item.id" @click="changeTag(item.id)"
						style="flex-shrink: 0">
						<view class="tag-name" :class="[item.id === inits.tagValue ? 'active' : '']">
							{{ item.room_type }}
						</view>
					</view>
				</view>
			</scroll-view>

			<scroll-view class="scroll-c" :scroll-y="inits.isScroll" style="height: calc(100% - 300rpx)">
				<!-- @scrolltolower="loadmore" -->
				<view class="scroll-c-list" v-for="(item, i) in inits.info.rooms" :key="item.id">
					<view style="height: 397rpx; position: relative">
						<image mode="aspectFill" style="width: 100%; height: 100%" v-if="item.images_arr"
							:src="item.images_arr.length?item.images_arr[0]: ''"></image>
						<view style="position: absolute; top: 30rpx; left: 30rpx; color: #fff" class="font-28">
							{{ item.r_name }}
						</view>
					</view>
					<view>
						<template v-if="!item.more">
							<view class="scroll-c-btn font-24 flex flex-dir-c flex-ai-c flex-jc-c"
								style="margin: 20rpx auto 33rpx auto" @click="reserve(item, 0)">
								<view class="mb_15">快速预订¥{{ item.package_price[0].price }}</view>
								<view>{{ item.min_day }}天起订</view>
							</view>
							<u-line />
						</template>
						<template v-else>
							<view v-for="(item2, i2) in item.package_price" @click="reserve(item, i2)"
								:key="item2.temp_price_id">
								<view class="more flex flex-jc-sb plr-20">
									<view class="more-left" style="width: 50%">
										<view style="color: #333333" class="font-28 description">
											{{ item2.price_title }}
											<u-icon name="arrow-right" size="20rpx"></u-icon>
										</view>
										<view class="description desc-2 font-20 mt-10" style="color: #666666">
											{{ item2.desc }}
										</view>
									</view>
									<view class="more-right flex flex-dir-c flex-ai-fe">
										<view class="more-right-d">
											<view>订</view>
											<view>{{ item2.pay_way == 'online' ? '线上付' : '到店付' }}</view>
										</view>
										<view style="color: #009943" class="mt-10">
											<text class="font-20">¥</text>
											<text class="font-36">{{ item2.price }}</text>
										</view>
										<view class="more-right-tag mt-10" v-if="item2.discount_price">
											会员立减¥{{ item2.discount_price }}</view>
									</view>
								</view>
								<u-line />
							</view>
						</template>
						<view style="color: #009943; padding: 23rpx 0" class="font-20 flex flex-jc-c"
							@click="item.more = !item.more">
							<view class="mr-10">{{ item.more ? '收起房价' : `查看¥${item.member_ship_money}起的更多房价` }}</view>
							<u-icon name="arrow-down" size="20rpx" color="#009943"
								:style="[item.more ? 'transform: rotate(180deg);' : '']" />
						</view>
					</view>
				</view>
				<!-- <u-loadmore bg-color="none" :status="parames.loadStatus" @loadmore="loadmore"
						v-if="parames.list.length"></u-loadmore> -->
			</scroll-view>
		</swiper-item>
		<swiper-item class="swiper-item">
			<view class="mt-30 refectory" v-for="(item, i) in inits.info.hotel_cater" :key="item.id"
				@click="jump(`/pages/hotel/details/introduce?id=${item.h_id}&type=1&cid=${item.id}`)">
				<image mode="aspectFill" :src="item.c_image"
					style="height: 366rpx; width: 100%; border-radius: 20rpx 20rpx 0 0"></image>
				<view style="margin: 16rpx 0 0 32rpx" class="font-30">
					{{ item.c_title }}
				</view>
			</view>
		</swiper-item>
	</swiper>
	<u-select @confirm="confirmRoom" v-model="inits.setRoom" :list="inits.roomColumns"></u-select>
	<u-select @confirm="confirmPeople" v-model="inits.setNum" :list="inits.peopleNum"></u-select>
</template>

<script setup lang="ts">
	import { reactive, ref, computed } from 'vue';
	import { onLoad, onShareAppMessage, onShow } from '@dcloudio/uni-app';
	import common from '@/api/common.js';
	import { useStore } from 'vuex';
	import hotel from '@/api/hotel.js';
	import { calendarData, roomColumns, peopleNum } from './arrJsons.js';
	import { calender } from '@/utils/getCalender.js';
	let tabs1 = ref();
	const store = useStore();
	const inits: any = reactive({
		info: {
			h_image_arr: [],
			rooms: [],
			h_name: '',
			check_cance_policy: ''
		},
		current: 0,
		swiperCurrent: 0,
		tabs: [{ name: '房间预订' }, { name: '基地餐饮' }],
		tag: [],
		isScroll: true,
		tagValue: -1,
		refectory: [],
		hotelId: null,
		calendarData: calendarData,
		room_tag: '',
		roomColumns: roomColumns,
		peopleNum: peopleNum(),
		setRoom: false,
		setNum: false,
	});
	const selectValue = computed(() => store.state.selectValues)
	const confirmRoom = (e) => {
		store.commit('SET_SELECT', {
			key: 'reserve_room_num',
			value: e[0].value
		})
	};
	function isVideoFile(filename) {
		filename = typeof filename === 'string' ? filename : '';
		// 常见视频格式扩展名
		const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'];

		// 获取文件扩展名（转小写）
		const ext = filename.split('.').pop().toLowerCase();

		return videoExtensions.includes(ext);
	}
	const confirmPeople = (e) => {
		store.commit('SET_SELECT', {
			key: 'reserve_p_num',
			value: e[0].value
		})
	}
	const sysConfig = async () => {
		const res = await common.sysConfig();
		inits.room_tag = res.data.room_tag;
	};
	const getRoomType = async (id) => {
		const res = await hotel.getRoomType();
		res.data.unshift({
			id: -1,
			room_type: '全部'
		});
		inits.tag = res.data;
		if (res.data.length) inits.tagValue = res.data[0].id;
		const res2 : any = await getHotelDetail(id);
		inits.info = res2;
		getTime(res2.rooms)
		sysConfig();
	};
	let minDay = ref(0)
	const getTime = (list) => {
		minDay.value = list.reduce((prev, current) => (prev.min_day < current.min_day ? prev : current)).min_day
		const res : any = calender(minDay.value || 1);
		inits.calendarData.start = res.now;
		inits.calendarData.end = res.tomorrow;
		store.commit('CalendarData', {
			...inits.calendarData,
			start: inits.calendarData.start,
			end: inits.calendarData.end,
			diff: minDay.value
		});
	}
	const chooseAddr = (item : any) => {
		uni.openLocation({
			longitude: Number(item.lng),
			latitude: Number(item.lat),
			name: item.h_image_tag,
			address: item.address,
			success: (res) => {
				console.log('打开成功');
			},
			fail: (err) => {
				console.log(err);
			}
		});
	};
	//预定
	const reserve = (v : any, i : number) => {
		setTimeout(() => {
			uni.$emit('check_cance_policy', inits.info.check_cance_policy);
		}, 500);
		let total_price = v.member_ship_money;
		if (i === 0 || i === 2) total_price = v.room_money;
		let obj = {
			hotel_id: v.h_id,
			room_id: v.id,
			temp_price_id: v.package_price[i].temp_price_id,
			total_price: total_price,
			h_name: inits.info.h_name,
			package: v.package_price[i],
			room_money_text: v.room_money_text,
			breakfast_money_text: v.breakfast_money_text,
			caregiver_money_text: v.caregiver_money_text,
			other_money_text: v.other_money_text,
			reserve_p_money_text: v.reserve_p_money_text,
			r_name: v.r_name,
			min_day: v.min_day
		};
		uni.navigateTo({
			url: `/pages/hotel/details/reserve?details=${JSON.stringify(obj)}`
		});
	};
	const changeTag = async (v : number) => {
		inits.info.rooms = [];
		inits.tagValue = v;
		const res : any = await getHotelDetail(inits.hotelId);
		inits.info.rooms = res.rooms;
	};
	// tabs通知swiper切换
	const tabsChange = (index : number) => {
		inits.swiperCurrent = index;
	};
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	};
	const animationfinish = (e) => {
		let current2 = Number(e.detail.current);
		tabs1.value.setFinishCurrent(current2);
		inits.swiperCurrent = current2;
		inits.current = current2;
	};
	const getHotelDetail = async (id : string) => {
		const res = await hotel.getHotelDetail({
			hotel_id: id,
			room_type: inits.tagValue
		});
		res.data.rooms.map((v : any) => (v.more = false));
		return res.data;
	};
	const jump = (url : string) => {
		uni.navigateTo({
			url: url
		});
	};
	onShareAppMessage(() => {
		return {
			title: inits.info.h_name,
			path: `/pages/hotel/details/index?id=${inits.hotelId}&userid=${uni.getStorageSync('userInfo').id || ''}`,
			imageUrl: inits.info?.h_image_arr[0]
		};
	});
	onShow(() => {
		if (store.state.calendarData) {
			inits.calendarData = store.state.calendarData
		}
	});
	onLoad(async (op : any) => {
		if (!op.id) return;
		inits.hotelId = op.id;
		getRoomType(op.id);
	});
</script>
<style>
	page {
		background: #f7f7f7;
		min-height: 100vh;
	}
</style>
<style lang="scss" scoped>
	.map-bg{
		background-image: url('https://www.zhinxs.com/image/map.jpg');
		background-size: 275rpx 100%;
		background-repeat: no-repeat;
	}
	button {
		font-size: 28rpx;
		font-weight: 300;
		color: #fff;
		padding: 0;
		margin-right: 8rpx;
		background: none;
		position: absolute;
		z-index: 11;
		width: 100%;
		height: 100%;
	}

	// 边框样式
	button::after {
		border: 0;
	}

	.addr {
		background: #fff;
	}

	.bg {
		width: 100%;
		height: 44rpx;
		position: absolute;
	}

	.list {
		height: 152rpx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, #000000 100%);
	}

	.title {
		height: 100rpx;
		background: #fff;
		border-radius: 10rpx;
		color: #009943;
		margin: 30rpx 36rpx;
	}

	.tag {
		.tag-name {
			// width: 100rpx;
			border-radius: 8rpx;
			border: 1rpx solid #009943;
			color: #009943;
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 17rpx;
			margin-right: 31rpx;
			margin-bottom: 30rpx;
		}

		.active {
			background: #009943 !important;
			color: #fff !important;
		}
	}

	.scroll-c {
		.scroll-c-list {
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 9rpx;
		}

		.scroll-c-btn {
			width: 470rpx;
			height: 100rpx;
			background: #009943;
			border-radius: 9rpx;
			color: #fff;
			text-align: center;
		}
	}

	.more {
		margin-top: 32rpx;

		.more-left {}

		.more-right {
			margin-bottom: 25rpx;

			.more-right-d {
				color: #fff;
				text-align: center;
				font-weight: lighter;
			}

			.more-right-d>view:first-child {
				width: 70rpx;
				height: 50rpx;
				background: #009943;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
				border: 1rpx solid #009943;
				font-size: 38rpx;
			}

			.more-right-d>view:last-child {
				width: 70rpx;
				height: 26rpx;
				color: #009943;
				font-size: 18rpx;
				border-radius: 0 0 9rpx 9rpx;
				border: 1rpx solid #009943;
			}

			.more-right-tag {
				height: 31rpx;
				background: linear-gradient(270deg, #f3d1b7 0%, #ffffff 100%);
				font-weight: 400;
				font-size: 20rpx;
				color: #f08301;
				line-height: 31rpx;
				text-align: center;
				padding: 0 10rpx;
			}
		}
	}

	.refectory {
		height: 459rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx #999999;
		border-radius: 20rpx;
	}
</style>